<script setup>
import { nextTick } from "vue";

const props = defineProps({
  headers: Array,
  tableData: Array,
});
// 合计占2单元格
const spanMethod = ({ row, column, rowIndex, columnIndex, length }) => {
  if (columnIndex === 0) {
    if (length > 1 && rowIndex === length - 1 && (row.jd_name === "合计" || row.area_name === "合计")) {
      return {
        display: "none",
      };
    }
  } else if (columnIndex === 1) {
    if (row.jd_name === "合计" || row.area_name === "合计") return [1, 2];
  }
};
// 单元格
const cellStyle = () => {
  return {
    height: "38px",
    padding: "4px 0",
    fontSize: "14px",
  };
};
// 表头
const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  /*  nextTick(() => {
    const dom = document.querySelector(`.${column.id}`);
    if (columnIndex === 0) {
      dom.setAttribute("colspan", 2);
      dom.innerHTML = column.label;
    }
    if (columnIndex === 1) {
      dom.setAttribute("colspan", 0);
      dom.style.display = "none";
    }
  }); */
  return {
    height: "38px",
    background: "#F5F7FA",
    color: "rgba(0, 0, 0, 0.85)",
  };
};

const getSummaries = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h("div", {}, ["合计"]);
      return;
    }
    sums[index] = index === 5 ? "X" : "";
  });
  nextTick(() => {
    const tds = document.querySelectorAll(
      "#table .el-table__footer-wrapper tr>td"
    );
    if (tds.length) {
      tds[0].colSpan = 2;
      tds[1].style.display = "none";
    }
  });
  return sums;
};
</script>
<template>
  <el-table
    id="table"
    class="top-15"
    :data="tableData"
    border
    style="width: 100%"
    :span-method="
      ({ row, column, rowIndex, columnIndex }) =>
        spanMethod({
          row,
          column,
          rowIndex,
          columnIndex,
          length: tableData.length,
        })
    "
    :cell-style="cellStyle"
    :header-cell-style="headerCellStyle"
    max-height="500"
  >
    <template v-for="(x, y) in headers" :key="y">
      <el-table-column
        v-if="!x.children"
        :prop="x.prop"
        :label="x.label"
        :min-width="x.minWidth"
        :align="x.align || 'center'"
        :show-overflow-tooltip="x.showOverflow"
      ></el-table-column>
      <el-table-column v-else :label="x.label" align="center">
        <el-table-column
          v-for="(item, index) in x.children"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
          :show-overflow-tooltip="item.showOverflow"
        ></el-table-column>
      </el-table-column>
    </template>
  </el-table>
</template>
<style scoped lang="scss"></style>
